import React, { useState, useEffect } from 'react';
import { Card, Table, Button, Tag, message, Space } from 'antd';
import { BookOutlined, ScheduleOutlined } from '@ant-design/icons';
import { listTrainings } from '../../../api/training';

/**
 * 培训列表页面
 * 显示所有可报名的培训课程
 */
const TrainingList = () => {
    const [loading, setLoading] = useState(false);
    const [trainings, setTrainings] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });

    useEffect(() => {
        fetchTrainings();
    }, [pagination.current, pagination.pageSize]);

    // 获取培训列表
    const fetchTrainings = async () => {
        setLoading(true);
        try {
            const response = await listTrainings({
                page: pagination.current,
                pageSize: pagination.pageSize,
                status: 'active',
            });
            
            setTrainings(response.data || []);
            setPagination({
                ...pagination,
                total: response.total || 0,
            });
        } catch (error) {
            console.error('获取培训列表失败:', error);
            message.error('获取培训列表失败');
        } finally {
            setLoading(false);
        }
    };

    // 查看培训详情
    const handleViewDetail = (record) => {
        message.info(`查看培训: ${record.title}`);
        // TODO: 跳转到培训详情页面
    };

    // 表格列配置
    const columns = [
        {
            title: '培训名称',
            dataIndex: 'title',
            key: 'title',
            render: (text, record) => (
                <a onClick={() => handleViewDetail(record)}>{text}</a>
            ),
        },
        {
            title: '培训类型',
            dataIndex: 'type',
            key: 'type',
            render: (type) => {
                const colorMap = {
                    '技能培训': 'blue',
                    '管理培训': 'purple',
                    '新员工培训': 'green',
                    '职业发展': 'orange',
                };
                return <Tag color={colorMap[type] || 'default'}>{type}</Tag>;
            },
        },
        {
            title: '开始日期',
            dataIndex: 'start_date',
            key: 'start_date',
        },
        {
            title: '结束日期',
            dataIndex: 'end_date',
            key: 'end_date',
        },
        {
            title: '培训讲师',
            dataIndex: 'instructor',
            key: 'instructor',
        },
        {
            title: '培训地点',
            dataIndex: 'location',
            key: 'location',
        },
        {
            title: '培训人数',
            dataIndex: 'capacity',
            key: 'capacity',
            render: (capacity, record) => `${record.enrolled_count || 0}/${capacity}`,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status) => {
                const statusMap = {
                    'active': { color: 'green', text: '可报名' },
                    'full': { color: 'orange', text: '已满' },
                    'in_progress': { color: 'blue', text: '进行中' },
                    'completed': { color: 'gray', text: '已结束' },
                    'cancelled': { color: 'red', text: '已取消' },
                };
                
                const { color, text } = statusMap[status] || { color: 'default', text: status };
                return <Tag color={color}>{text}</Tag>;
            },
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button 
                        type="primary" 
                        size="small" 
                        icon={<BookOutlined />}
                        onClick={() => handleViewDetail(record)}
                    >
                        详情
                    </Button>
                </Space>
            ),
        },
    ];

    return (
        <Card title="培训课程列表">
            <Table
                columns={columns}
                dataSource={trainings}
                rowKey="id"
                loading={loading}
                pagination={pagination}
                onChange={(pagination) => setPagination(pagination)}
            />
        </Card>
    );
};

export default TrainingList; 